<template>
    <div>
        <div class="msj_pinsp_btn">
            <div>
                <el-button type="primary" @click="toaddshop" size="small">添加商品</el-button>
            </div>
            <div>
                <el-input v-model="input" :keyup="input=input.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 200px;" placeholder="请输入关键词"></el-input>
                <el-button @click="onSearch">搜索</el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="(item,index) in tabs" :key="index" :label="item.label" :name="item.name">
        <el-table
    :data="tabbledData"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      prop="sorts"
      label="排序"
      width="100">
    </el-table-column>
    <el-table-column
      label="商品标题"
      width="200">
      <template slot-scope="scope">
        <div class="msj_pinshops_info">
          <div class="msj_pinshops_img">
            <img :src="scope.row.spinfo.img" alt="">
          </div>
          <span>{{ scope.row.spinfo.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="团购价"
      width="160">
      <template slot-scope="scope">
          <span>￥{{ scope.row.tuangou }}</span>
      </template>
    </el-table-column>
    <el-table-column
      width="160"
      label="单购价">
      <template slot-scope="scope">
          <span>￥{{ scope.row.dangou }}</span>
      </template>
    </el-table-column>
    <el-table-column
    prop="kucun"
    width="160"
      label="库存">
    </el-table-column>
    <el-table-column
    prop="xiaol"
    width="140"
      label="销量">
    </el-table-column>
    <el-table-column
    prop="state"
    width="100"
      label="状态">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button v-if="scope.row.state=='回收站'" @click="handlesClick(scope.row,0)" type="text" size="small">恢复出售</el-button>
        <div v-else>
            <el-button @click="handlesClick(scope.row,1)" type="text" size="small">修改</el-button>
            <el-button @click="handlesClick(scope.row,2)" type="text" size="small">删除</el-button>
        </div>
            
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
  </el-tabs>
    </div>
</template>

<script>
import {getmsjpinshops,delmsjpinshops,setmsjpinshops} from '../../../utils/api'
export default {
    name: 'PhaemacySpellshops',
    data() {
        return {
            input: '',
            curr:0,
            activeName: '1',
            tabs:[
                {
                    name:'1',
                    label:'全部',
                    names:'全部'
                },
                {
                    name:'2',
                    label:'出售中',
                    names:'出售中'
                },
                {
                    name:'3',
                    label:'已售罄',
                    names:'已售罄'
                },
                {
                    name:'4',
                    label:'仓库中',
                    names:'仓库中'
                },
                {
                    name:'5',
                    label:'回收站',
                    names:'回收站'
                }
            ],
            tabbledData:[]
        };
    },
    created(){
        this.getpinshops()
    },
    mounted() {
        
    },

    methods: {
        // 获取所有商品 
        getpinshops(){
            getmsjpinshops().then(res=>{
               let data=res.data.data.map(v=>{
                    v.spinfo=JSON.parse(v.spinfo)
                    return v
               })
               data.sort((a,b)=>a.sorts-b.sorts)
               let data1=data.filter(v=>v.spinfo.name.includes(this.input))
                this.tabs[0].tablist=this.input==''?data:data1
                this.tabs[1].tablist=(this.input==''?data:data1).filter(v=>v.state=='上架')
                this.tabs[2].tablist=(this.input==''?data:data1).filter(v=>v.state=='已售罄')
                this.tabs[3].tablist=(this.input==''?data:data1).filter(v=>v.state=='仓库中')
                this.tabs[4].tablist=(this.input==''?data:data1).filter(v=>v.state=='回收站')
                this.tabs=this.tabs.map((v,i)=>{
                    if(i>0){
                        v.label=`${v.names} (${v.tablist.length})`
                    }
                    return v
                })
                this.tabbledData=this.input==''?this.tabs[this.curr].tablist:data1              
            })
        },
        handleClick(tab, event) {
        // console.log();
        this.curr=tab.index
        this.tabbledData=this.tabs[tab.index].tablist
      },
    //   搜索 
        onSearch(){
            this.getpinshops()
        },
        // 删除 修改 恢复出售
        handlesClick(v,n){
            if(n==1){ //修改
                let obj={
                    data:v,
                    isadd:0,
                    isstate:0,
                }
                if(v.state!='上架'){
                    obj.isstate=1
                }
                this.$router.push({
                    name:'addspellshop',
                    params:obj
                })
                sessionStorage.setItem('spellsshop',JSON.stringify(obj))
            }else{ //删除，恢复出售操作
        (n==2?(this.$confirm('是否确认删除此商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })):this.$confirm('是否确认恢复出售状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })).then(()=>{
            if(n==0){
                v.state='仓库中'
                v.spinfo=JSON.stringify(v.spinfo)
            }
            (n==0?setmsjpinshops(v):delmsjpinshops(v.id)).then(res=>{
                this.$message.success(res.data.msg)
                this.getpinshops()
            })
        }).catch(()=>{
            this.$message({
            type: 'info',
            message: n==2?'已取消删除':'已取消恢复'
          });
        })                  
            }
        },
        // 跳转添加商品 
        toaddshop(){
            let obj={
                isadd:1,
                isstate:0,
            }
            this.$router.push({
                name:'addspellshop',
                params:obj
            })
            sessionStorage.setItem('spellsshop',JSON.stringify(obj))
        }
    },
};
</script>

<style  scoped>
*{
    margin: 0;
}
    .msj_pinsp_btn{
        width: 90%;
        display: flex; 
        justify-content: space-between;
        padding: 10px 0 20px;
    }
    .msj_pinshops_info{
        display: flex;
        width: 100%; font-size: 13px; align-items: center;
        justify-content: space-between;
    }
    .msj_pinshops_img{

    }
    .msj_pinshops_img img{
        width: 60px;
    }
</style>